<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" fullscreen>
      <div class="steps">
        <el-steps direction="horizontal" finish-status="success" :active="activeStep" align-center>
          <el-step v-for="step in showSteps" :key="step.code" :title="step.processName"></el-step>
        </el-steps>
      </div>
      <div class="expand1" @click="handleExpandAll">
        <svg-icon icon-class="list"></svg-icon>
        {{
          !showAll ? '展开工单信息' : '隐藏工单信息'
        }}
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">
        <div v-if="showAll">
          <div class="formtop">
            <div class="formcenter">工单基本信息</div>
            <div class="formbottom" v-if="showBasic">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="工单名称:" prop="taskName">
                    <el-input v-model="ruleForm.taskName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="工单编号:" prop="taskNo">
                    <el-input v-model="ruleForm.taskNo" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="单位:" prop="deptName">
                    <el-input v-model="ruleForm.deptName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="盘点对象:" prop="warehouseName">
                    <el-input v-model="ruleForm.warehouseName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="盘点人:" prop="personName">
                    <el-input v-model="ruleForm.personName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="任务类型:" prop="taskTypeName">
                    <el-input v-model="ruleForm.taskTypeName" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="计划开始时间:" prop="planStime">
                    <el-input v-model="ruleForm.planStime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="计划结束时间:" prop="planEtime">
                    <el-input v-model="ruleForm.planEtime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="盘点内容:" prop="description">
                    <el-input v-model="ruleForm.description" placeholder="无数据" clearable disabled
                              type="textarea"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="备注:" prop="remark">
                    <el-input v-model="ruleForm.remark" placeholder="无数据" clearable disabled
                              type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>


        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">接派单信息</div>
            <div class="formbottom" v-if="showPaidan">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="派单人:" prop="sendPerson">
                    <el-input v-model="ruleForm.sendPerson" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="派单人电话:" prop="sendTel">
                    <el-input v-model="ruleForm.sendTel" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="派单时间:" prop="sendTime">
                    <el-input v-model="ruleForm.sendTime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="接单人:" prop="receiver">
                    <el-input v-model="ruleForm.receiver" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="接单时间:" prop="receivingTime">
                    <el-input v-model="ruleForm.receivingTime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="接单时间:" prop="receivingTime" v-show="1==2">
                    <el-input v-model="ruleForm.receivingTime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>


        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">盘点结果</div>
            <div class="formbottom" v-if="showPandain">
              <vxe-table border stripe ref="selectedEquip" height="200" :data="list.data">
                <vxe-column field="equipTypeName" title="设备类型" align="center" minWidth="150"></vxe-column>
                <vxe-column field="scanNum" title="扫一扫" align="center" minWidth="150"></vxe-column>
                <vxe-column field="manualNum" title="手动新增" align="center" minWidth="150"></vxe-column>
                <vxe-column field="totalNum" title="盘点总数" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span v-if="row.totalNum > 0" class="textColor"
                          @click="handlePandianList(row,'盘点总数明细')">{{ row.totalNum }}</span>
                    <span v-if="row.totalNum === 0" class="textColor">{{ row.totalNum }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="stockNowNum" title="库存数量" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span v-if="row.stockLogNum > 0" class="textColor"
                          @click="handlePandianList(row,'库存数量明细')">{{ row.stockLogNum }}</span>
                    <span v-if="row.stockLogNum === 0" class="textColor">{{ row.stockLogNum }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="matchNum" title="匹配数量" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span v-if="row.matchNum > 0" class="textColor"
                          @click="handlePandianList(row,'匹配数量明细')">{{ row.matchNum }}</span>
                    <span v-if="row.matchNum === 0" class="textColor">{{ row.matchNum }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="diffNum" title="差异" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span v-if="row.diffNum > 0" class="textColor"
                          @click="handlePandianList(row,'差异明细')">{{ row.diffNum }}</span>
                    <span v-if="row.diffNum === 0" class="textColor">{{ row.diffNum }}</span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>

        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">缺陷信息</div>
            <div class="formbottom" v-if="showyinhuan">
              <vxe-table border stripe ref="selectedqxEquip" height="200" :data="list2.data">
                <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
                <vxe-column v-if="!isDisabled" field="defectStatusCode" align="center" title="审核" minWidth="180">
                  <template v-slot="{ row }">
                    <el-row>
                      <el-button :type="row.defectStatusCode === '1'?'primary':'info'"
                                 :disabled="row.defectStatusCode === '1'?false:true" size="mini"
                                 @click="handleClick(row, 1)">通过
                      </el-button>
                      <el-button :type="row.defectStatusCode === '1'?'primary':'info'"
                                 :disabled="row.defectStatusCode === '1'?false:true" size="mini"
                                 @click="handleClick(row, 2)">不通过
                      </el-button>
                    </el-row>
                  </template>
                </vxe-column>
                <vxe-column field="defectStatusName" title="审核结果" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="unitName" title="单位" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="equipName" title="设备名称" align="center" minWidth="150">
                </vxe-column>
                <!-- <vxe-column field="equipNo" title="出厂编码" align="center" minWidth="150">
                </vxe-column> -->
                <vxe-column field="equipTypeName" title="设备类型" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectName" title="缺陷名称" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectAddress" title="缺陷地点" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectParts" title="缺陷部位" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="partName" title="部件名称" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectDescription" title="缺陷描述" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="creatTime" title="发现日期" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="isHandle" title="是否已处理" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span>{{ row.isHandle === '0' ? '未处理' : '已处理' }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="afterPictureIds" title="处理后照片" align="center" minWidth="150">
                  <template v-slot="{ row }">

                    <el-image v-for="items in row.srcHistoryList" :key="items" style="width: 60px; height: 30px;"
                              :src="items" :preview-src-list="row.srcHistoryList" alt=""/>

                  </template>
                </vxe-column>
                <vxe-column field="noSiteResult" title="未处理原因" align="center" minWidth="150">
                </vxe-column>
              </vxe-table>
            </div>
          </div>
        </div>
        <div>

          <div class="formtop">
            <div class="formcenter">结论报告</div>
            <div class="formbottom" v-if="showJielun">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="" prop="conclusion" label-width="0">
                    <el-input v-model="ruleForm.conclusion" placeholder="根据盘点详情自动生成" clearable
                              disabled type="textarea"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
            </div>
          </div>


        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">工单规范性评价</div>
            <div class="formbottom" v-if="showPingjia">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <el-form-item v-if="isDisabled" label="评价结论:" prop="appraiseStatusName">
                    <el-input v-model="ruleForm.appraiseStatusName" placeholder="无数据" clearable
                              :disabled="isDisabled"></el-input>
                  </el-form-item>
                  <el-form-item v-if="!isDisabled" label="评价结论:" prop="appraiseStatus">
                    <el-select v-model="ruleForm.appraiseStatus" placeholder="请选择评价结论" clearable
                               style="width: 100%" @change="appraiseStatusChange">
                      <el-option v-for="item in appraiseStatusOptions" :key="item.value" :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <el-form-item label="评价人:" prop="appraisePerson">
                    <el-input v-model="ruleForm.appraisePerson" placeholder="无数据" clearable
                              :disabled="isDisabled"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <el-form-item label="评价时间:" prop="appraiseTime">
                    <el-input v-model="ruleForm.appraiseTime" placeholder="无数据" clearable
                              :disabled="isDisabled"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item v-show="!appraiseContentShow" label="评价说明:" prop="appraiseContent">
                    <el-input v-model="ruleForm.appraiseContent" placeholder="无数据" clearable
                              :disabled="isDisabled" type="textarea"></el-input>
                  </el-form-item>
                  <el-form-item v-show="appraiseContentShow" label="评价说明:">
                    <el-input v-model="ruleForm.appraiseContent" placeholder="无数据" clearable
                              :disabled="isDisabled" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>
        </div>
      </el-form>
      <span v-if="!isDisabled" slot="footer" class="dialog-footer">
                <el-button @click="handleCancel()" :size="size" icon="fa fa-minus-square-o">取消</el-button>
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
            </span>
      <equipmentList ref="equipmentList"></equipmentList>
    </el-dialog>
  </div>
</template>
<script>
import {workOrderModelForm} from "../model/workOrderModelForm";
import {workOrderManagement} from '@/api/equip/workOrderManagement.js'
import equipmentList from "./equipmentList.vue"
import {getInfo} from "@/api/login";
import moment from "moment";

export default {
  components: {equipmentList},
  data() {
    return {
      isDisabled: true,
      srcList: [],
      showPhone: [],
      showBox: true,
      appraiseContentShow: false,
      dialogProps: {
        visible: false,
        title: "过程监视",
        top: '5px',
        class: 'monitor-dialog-container',
        // width: '70%'
      },
      size: "medium",
      ruleForm: workOrderModelForm.FormData,
      rules: workOrderModelForm.rules,
      appraiseStatusOptions: [{label: '合格', value: '1'}, {label: '不合格', value: '2'},],
      row: {},
      showSteps: [],
      steps: [
        {
          isNode: 1,
          isActive: 1,
          processDate: '2017-12-11 14：01',
          processName: '任务编制',
          code: '1',
          stepName: 'bianzhi',
          stepStatus: 'already',
          lineImg: 'buzhou1'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '派单',
          code: '2',
          stepName: 'paidan',
          stepStatus: 'already',
          lineImg: 'buzhou2'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '接单',
          code: '3',
          stepName: 'jiedan',
          stepStatus: 'isNode',
          lineImg: 'buzhou6'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '开始检测',
          code: '4',
          stepName: 'jiance',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '工单规范性评价',
          code: '5',
          stepName: 'pingjia',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '',
          processName: '归档',
          code: '7',
          stepName: 'guidang',
          stepStatus: 'not',
          lineImg: 'buzhou3'
        }
      ],
      list: {
        data: [{
          sblxmc: '开闭器',
          kcs: '133',
          ppsl: '100',
          cy: '122'
        }]
      },
      list1: {
        data: []
      },
      list2: {
        data: [],
        pageNo: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        total: 0
      },
      showAll: true,
      showPaidan: true,
      showBasic: true,
      showPandain: true,
      showyinhuan: true,
      showJielun: true,
      showPingjia: true,
      activeStep: 0
    };
  },
  methods: {
    showDialog(row, isEdit) {
      // this.row = row.row
      this.$nextTick(() => {
        workOrderManagement.getById(row.row.id).then(res => {

          this.row = res.data[0]

          this.dialogProps.visible = true;
          this.fetchProcess()
          this.getTable(res.data[0].taskNo)
          for (let key in this.ruleForm) {
            this.ruleForm[key] = this.row[key]
          }

          if (isEdit) {
            // debugger
            this.dialogProps.title = '质量评价'
            this.appraiseContentShow = false
            this.isDisabled = false
            getInfo().then(res => {
              this.ruleForm.appraisePerson = res.user.nickName
              this.ruleForm.appraiseTime = moment().format("YYYY-MM-DD HH:mm:ss")
            })
          } else {
            this.dialogProps.title = '过程监视'
            this.isDisabled = true
            this.appraiseContentShow = true
          }
        })
      })
    },
    getTable(taskNo) {
      this.showPhone = []
      this.srcList = []
      workOrderManagement.getTaskDefectList(taskNo).then(res => {
        this.list2.data = []
        res.data.map(item => {
          if (item.sitePictureIds && item.sitePictureIds.length > 10) {
            item.srcHistoryList = []
            if (item.sitePictureIds.indexOf(',') !== -1) {
              var arr = item.sitePictureIds.split(',')

              // if(arr[0].startsWith("http")){
              //     item.srcHistoryList = arr[0];
              // }else{
              //     item.srcHistoryList = this.udsImageUrl+arr[0]+"/user.png"
              // }
              arr.map(des => {
                if (des.startsWith("https")) {
                  des = des;
                }

                item.srcHistoryList.push(des)
              })
            } else {
              if (item.sitePictureIds.startsWith("https")) {
                item.srcHistoryList.push(item.afterPictureIds);
              }
            }

          }
          this.list2.data.push(item)
        })
      }).catch(err => {
        console.log(err)
      })

      workOrderManagement.getEquipStatistics(this.row.taskNo).then(res => {
        this.list.data = res.data
      })
    },
    handlePageChange1({currentPage, pageSize}) {

      this.list2.pageNo = currentPage;
      this.list2.pageSize = pageSize;
      this.getTable()
    },
    handleExpandAll() {
      if (!this.showAll) {
        this.showPaidan = false

      }
      this.showAll = !this.showAll
    },
    fetchProcess() {
      workOrderManagement.getTaskOperateList(this.row.taskNo).then(res => {
        this.showSteps = res.data.operateVoList.map((d, i) => {
          const item = this.steps.find(b => b.code === d.code)
          d.stepName = item.stepName
          d.stepStatus = d.isNode ? 'isNode' : d.isActive ? 'already' : 'not'
          if (i === 0) {
            d.lineImg = d.isNode ? 'buzhou5' : d.isActive ? 'buzhou1' : 'buzhou4'
          } else if (i === (res.data.operateVoList.length - 1)) {
            d.lineImg = d.isNode ? 'buzhou9' : d.isActive ? 'buzhou8' : 'buzhou3'
          } else {
            d.lineImg = d.isNode ? 'buzhou6' : d.isActive ? 'buzhou2' : 'buzhou7'
          }
          return d
        })
        this.showSteps.forEach(item => {
          if (item.isActive == 1) {
            this.activeStep = item.code
          }
        })
      })
    },


    //编辑渲染
    initData() {

    },

    //确定关闭
    handleClose(done) {
      this.dialogProps.visible = false;


    },
    appraiseStatusChange(value) {
      this.ruleForm.appraiseStatusName = '';
      if (value) {
        let arr = this.appraiseStatusOptions.filter(item => {
          return item.value == value;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.appraiseStatusName = arr[0].label;
        }
      }
      if (value == '2') {
        this.appraiseContentShow = true
      } else {
        this.appraiseContentShow = false
      }

    },
    handlePandianList(row, title) {
      this.$refs.equipmentList.showDialog(true, row, false, title)
    },
    //确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var bool = true
          if (this.list2.data.length > 0) {
            this.list2.data.map(item => {
              if (item.defectStatusCode === '1') {
                bool = false
              }
            })
          }
          if (bool) {
            const queryParam = Object.assign({}, this.ruleForm)

            const params = [{
              id: this.row.id,
              taskStatus: '99',
              taskStatusName: '归档',
              ...queryParam,
            }]
            workOrderManagement.updateData(params).then(res => {
              if (res.code === '200') {
                this.$message.success('评价成功')
                this.handleCancel()
                this.$emit('onSearch')
                this.dialogProps.visible = false;
              }

            }).catch(err => {


            })
          } else {
            this.$message.warning('请审核完缺陷隐患后，才可以质量评价')
          }
        } else {
          return false;
        }
      });

    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()
      // for (const k in this.form.data) {
      //   this.form.data[k] = ''
      // }
      this.list = {
        data: [],
      }
      this.row = {}
      this.dialogProps.visible = false;
    },
    handleClick(row, type) {

      if (type === 1) {
        if (row.isHandle == '未处理') {
          row.defectStatusCode = '2'
          row.defectStatusName = '审核通过(未处理)'
        } else {
          row.defectStatusCode = '100'
          row.defectStatusName = '已处理'
          row.handleTaskNo = row.taskNo
          row.handleTaskName = row.taskName
          row.handleTaskType = 1
          row.afterPictureIds = row.sitePictureIds
        }


      } else {
        row.defectStatusCode = '3'

        row.defectStatusName = '审核不通过'
      }

      workOrderManagement.updateDefect([row]).then(res => {
        workOrderManagement.getTaskDefectList(this.row.taskNo).then(res => {
          this.list2.data = []
          this.list2.data = res.data
        }).catch(err => {

        })
      })
    }
  },
};

</script>
<style>
.textColor {
  color: #4e00fe;
}
</style>

